<template>
  <div class="comp-full-calendar">
    <fc-header :current-date="currentDate" :title-format="titleFormat" :first-day="firstDay" :month-names="monthNames" @change="emitChangeMonth">
      <template #header-left>
        <slot name="fc-header-left"></slot>
      </template>
      <template #header-right>
        <slot name="fc-header-right"></slot>
      </template>
    </fc-header>
    <fc-body :current-date="currentDate" :events="events" :month-names="monthNames" :week-names="weekNames" :first-day="firstDay" @eventclick="emitEventClick" @dayclick="emitDayClick" @moreclick="emitMoreClick">
      <template #body-card>
        <slot name="fc-body-card"></slot>
      </template>
    </fc-body>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue';
import * as langSets from './utils/langSets';
import Header from './components/header.vue';
import Body from './components/body.vue';

// 定义 props
const props = defineProps({
  events: { // events will be displayed on calendar
    type: Array as () => any[],
    default: () => []
  },
  lang: {
    type: String,
    default: 'en'
  },
  firstDay: {
    type: [Number, String] as unknown  as  number | string,
    validator: (val: number | string) => {
      const res = parseInt(val as string);
      return res >= 0 && res <= 6;
    },
    default: 0
  }
});

// 定义 data
const currentDate = ref(new Date());

// 定义 emits
const emit = defineEmits(['changeMonth', 'eventClick', 'dayClick','moreClick']);

// 定义计算属性
const titleFormat = computed(() => langSets.langSets[props.lang].titleFormat);
const monthNames = computed(() => langSets.langSets[props.lang].monthNames);
const weekNames = computed(() => {
  const arr = langSets.langSets[props.lang].weekNames;
  return arr.slice(Number(props.firstDay)).concat(arr.slice(0, Number(props.firstDay)));
});

// 定义方法
const emitChangeMonth = (start: Date, end: Date, currentStart: Date, current: Date) => {
  currentDate.value = current;
  emit('changeMonth', start, end, currentStart, current);
};

const emitEventClick = (date: Date, event: any, jsEvent: MouseEvent, pos: any) => {
  emit('eventClick', date, event, jsEvent, pos);
};

const emitDayClick = (day: Date, jsEvent: MouseEvent) => {
  emit('dayClick', day, jsEvent);
};

const emitMoreClick = (day: Date, events: any[], jsEvent: MouseEvent) => {
  emit('moreClick', day, events, jsEvent);
};

// 注册组件
const fcHeader = Header;
const fcBody = Body;
</script>

<style lang="scss">
.comp-full-calendar {
  background: #fff;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  ul,
  p {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }
}
</style>    